<template>
	<view>
		<!-- 公共顶部导航栏 -->
		<navbar></navbar>
		<view style="background-color: #FFFFFF;padding: 24rpx 30rpx;">
			<view class="flex justify-between" @click="goTopic()">
				<view style="color: #1E1E1E;font-size: 32rpx;font-weight: 600;">热门话题</view>
				<view style="color: #FF801F;font-size: 28rpx;">更多...</view>
			</view>
			<view style="margin: 24rpx 0 20rpx 0;">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<view class="flex">
						<view class="followList flex justify-between" style="padding:25rpx;margin-right:30rpx;"
							v-for="(item,index) in followData">
							<view style="margin-right: 120rpx;">
								<view style="color: #1E1E1E;font-size: font-size: 28rpx;;">{{item.title}}</view>
								<view class="title-answer">{{item.answer}}个回答</view>
							</view>
							<view style="color: #492D22;font-size: 28rpx;margin-top: 15rpx;">讲两句</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view style="padding: 30rpx;">
			<u-tabs :list="list" @click="clickTab" lineHeight="7" lineWidth="75" lineColor="#9B5D45"></u-tabs>
			<view v-if="tablist==0" v-for="(item,index) in tabData" :key="index" @tap="goIndex(item)">
				<view style="width: 690rpx;height:488rpx;margin:20rpx auto;border-radius: 20rpx;">
					<image :src="item.image" mode="" style="width: 100%;height: 100%;border-radius: 20rpx;"></image>
				</view>
				<view class="flex justify-between" style="margin:0 auto ;">
					<view style="color: #333333;font-size: 36rpx;font-weight:650;width: 75%;">{{item.title}}</view>
					<view class="Original">原创</view>
				</view>
				<view class="flex">
					<view style="margin-top: 14rpx;color: rgba(30,30,30,0.3);margin-right: 40rpx;"> #{{item.topic}}#
					</view>
				</view>
				<view class="flex align-center" style="margin-top: 10rpx;">
					<u-avatar :src="item.userAvatar" size="50"></u-avatar>
					<view style="margin-left: 10rpx;" class="flex flex-direction">
						<view style="color: #333333;font-size: 32rpx;margin:10rpx ;">{{item.userNick}}</view>
						<view
							style="margin-left: 10rpx; color: #FFFFFF;background: linear-gradient(167deg, #FCA253 0%, #EFDBB6 100%);border-radius:18rpx;font-size: 22rpx;text-align: center;padding:6rpx 16rpx ;">
							年度优秀</view>
					</view>
				</view>
			</view>
			<view v-if="tablist==1" v-for="(item,index) in ProjectNotes" :key="index" @tap="goIndex(item)">
				<view style="width: 690rpx;height:488rpx;margin:20rpx auto;border-radius: 20rpx;">
					<image :src="item.image" mode="" style="width: 100%;height: 100%;border-radius: 20rpx;"></image>
				</view>
				<view class="flex justify-between" style="margin:0 auto ;">
					<view style="color: #333333;font-size: 36rpx;font-weight:650;width: 75%;">{{item.title}}</view>
					<view class="Original">原创</view>
				</view>
				<view class="flex">
					<view style="margin-top: 14rpx;color: rgba(30,30,30,0.3);margin-right: 40rpx;"> #{{item.topic}}#
					</view>
				</view>
				<view class="flex align-center" style="margin-top: 10rpx;">
					<u-avatar :src="item.userAvatar" size="50"></u-avatar>
					<view style="margin-left: 10rpx;" class="flex flex-direction">
						<view style="color: #333333;font-size: 32rpx;margin:10rpx ;">{{item.userNick}}</view>
						<view
							style="margin-left: 10rpx; color: #FFFFFF;background: linear-gradient(167deg, #FCA253 0%, #EFDBB6 100%);border-radius:18rpx;font-size: 22rpx;text-align: center;padding:6rpx 16rpx ;">
							年度优秀</view>
					</view>
				</view>
			</view>
			<!-- <view v-if="tablist==2">11111</view> -->
		</view>

	</view>
</template>

<script>
	import navbar from "@/components/publicomps/navbar.vue";
	export default {
		components: {
			navbar
		},
		data() {
			return {
				followData: [{
					title: '#全屋定制#',
					answer: 365
				}, {
					title: '#全屋定制#',
					answer: 365
				}, {
					title: '#全屋定制#',
					answer: 365
				}, {
					title: '#全屋定制#',
					answer: 365
				}, {
					title: '#全屋定制#',
					answer: 365
				}],
				list: [{
						name: '发现好物'
					}, {
						name: '项目笔记'
					},
					// {
					// 	name: '关注'
					// },
				],
				tabData: [],
				ProjectNotes: [],
				tablist: 0
			}
		},
		onLoad() {
			this.gitList()
			this.getProjectNotes()
		},
		onShow() {},
		// 下拉刷新
		onPullDownRefresh() {
			// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
			setTimeout(() => {
				this.gitList();
			}, 100);
		},
		methods: {
			gitList() {
				let data = {
					pageNo: 1,
					pageSize: 10
				}
				this.$api.notes(data).then((res) => {
					this.tabData = res.data.result.pageResult.list
					console.log(res, 'dataList')
					// 关闭下拉
					uni.stopPullDownRefresh();
				})
			},
			getProjectNotes() {
				let data = {
					pageNo: 1,
					pageSize: 10
				}
				this.$api.notes(data).then((res) => {
					this.ProjectNotes = res.data.result.designerProjectNotePageResult.list
					console.log(res, 'dataList')
					// 关闭下拉
					uni.stopPullDownRefresh();
				})
			},
			scroll: function(e) {
				this.scrollTop = e.detail.scrollTop
			},
			clickTab(e) {
				this.tablist = e.index
			},
			goTopic() {
				this.$tools.goPageNoAuth('/clientEnd/page/topic/hotTopic')
			},
			goIndex(e) {
				this.$tools.goPageNoAuth('/clientEnd/page/decoration/homepageDetails?data=' + JSON.stringify(e))
			}
		}
	}
</script>

<style scoped>
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.followList {
		width: 436rpx;
		height: 124rpx;
		background: rgba(30, 30, 30, 0.05);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
	}

	.title-answer {
		font-size: 24rpx;
		color: rgba(30, 30, 30, 0.3);
		margin-top: 15rpx;
	}

	.Original {
		border: 1rpx solid #FF6F00;
		color: #FF6F00;
		height: 48rpx;
		padding: 5rpx 44rpx;
		border-radius: 32rpx;
		font-size: 26rpx;
	}
</style>
